<!-- 基础设置 -> 账套设置主建 -->
<template>
    <nly-content-wrapper class="a-base-container">
        <div class="resize-table-container-setting account-set-wrappe">
            <a-row style="width:800px;">
                <a-col>
                    <!-- <div class="account-year">
                        账套年度:
                        <a-select :value="currentAccountYear" class="year-select" @change="selectAccountYear">
                            <a-select-option v-for="(item, index) in accountYearList" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </div> -->
                    <div class="tabs-box">
                        <a-tabs default-active-key="1" @change="changTab">
                            <a-tab-pane key="1" tab="基本信息">
                                <!-- 账套基本信息 -->
                                <a-card v-if="accountList && accountList.length > 0" :bordered="false">
                                    <template slot="actions">
                                        <div class="align-right" v-if="!currentAccount.status &&currentAccount.id &&!isEditAccount">
                                            <a-button type="primary" @click="editAccouontFun" icon="edit">编辑</a-button>
                                        </div>

                                        <div class="align-right" v-if="isEditAccount">
                                            <a-button class="mr-3" @click="cancelEditAccouontFun" icon="close-circle">
                                                取消</a-button>
                                            <a-button type="primary" @click="saveAccouont" icon="edit">保存</a-button>
                                        </div>
                                    </template>
                                    <a-row class="form-inline" v-show="!isEditAccount">
                                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(item, index) in accountColumns" :key="index">
                                            <form-show :title="item.title" labelStyle="" rightStyle="width:180px;" class="ml-1" style="margin-bottom:15px;line-height:40px;" :value="currentAccount[item.dataIndex]">
                                            </form-show>
                                        </a-col>
                                    </a-row>
                                    <!-- 账套基本信息编辑 -->
                                    <accountSet v-show="isEditAccount" ref="accountSetRef" @ok="saveAccouontCallBack"></accountSet>
                                </a-card>

                                <!--账套管理内容-->
                                <a-card class="content-zt" v-else :bordered="false">
                                    <div class="null-wrapper">
                                        <p class="text">暂无账套，请新建</p>
                                        <a-button class="btn" type="primary" @click="addAccouontFun" icon="plus">新增</a-button>
                                    </div>
                                </a-card>

                                <!--账套管理内容结束-->

                                <!-- 弹窗引导 -->
                                <guideModal ref="modalOne" :array="array" @ok="ListAccount"></guideModal>
                            </a-tab-pane>
                            <a-tab-pane key="2" tab="会计期间" force-render :disabled="accountList.length == 0">
                                <a-card class="content-hj" :bordered="false">
                                    <!-- 会计期间信息 -->
                                    <template slot="actions">
                                        <div class="align-right" v-if="currentAccount.erpPeriodList && !isEditPeriod">
                                            <a-button class="ml-2" type="primary" @click="editAccountingFun" icon="edit">编辑</a-button>
                                        </div>
                                        <div class="align-right" v-if="isEditPeriod">
                                            <a-button class="mr-3" @click="cancelEditPeriodFun" icon="close-circle">
                                                取消</a-button>
                                            <a-button type="primary" @click="savePeriod" icon="edit">保存</a-button>
                                        </div>
                                    </template>
                                    <a-table style="width:400px;height:440px;" :rowClassName="rowClassName" v-show="!isEditPeriod" class="middle-table" :columns="periodColumns" :pagination="false" :data-source="currentAccount.erpPeriodList || []" :scroll="scroll" bordered>
                                    </a-table>
                                    <accountingSet v-show="isEditPeriod" ref="accountingSetRef" @accountingSetok="savePeriodCallBack"></accountingSet>
                                </a-card>

                                <!--会计期间内容结束-->
                            </a-tab-pane>
                            <!-- <a-tab-pane key="3" tab="账户启用" :disabled="accountList.length == 0">
                                <enableSet ref="enableSetRef"></enableSet>
                            </a-tab-pane> -->
                            <!-- 编码规则 -->
                            <a-tab-pane key="4" tab="编码规则" :disabled="accountList.length == 0">
                                <a-card :bordered="false">
                                    <template slot="actions">
                                        <div class="align-right">
                                            <a-button class="ml-2" type="primary" @click="saveCoding" icon="save">保存</a-button>
                                        </div>
                                    </template>
                                    <codingSet ref="codingSetRef" @codingSetok="saveCodingCallBack"></codingSet>
                                </a-card>
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                </a-col>
            </a-row>
        </div>
    </nly-content-wrapper>
</template>

<script>
import guideModal from "./model/guideModal";
// import enableSet from "./accountSetModal/enableSet";
// import codingSet from "./accountSetModal/codingSet";
import { list as listAccount } from "@/api/erp/account";
import moment from "moment";

const accountSet = () => import("./accountSetModal/accountSet"); // 账套管理
const accountingSet = () => import("./accountSetModal/accountingSet"); // 会计期间
const enableSet = () => import("./accountSetModal/enableSet"); // 账户启用
const codingSet = () => import("./accountSetModal/codingSet"); // 编码规则

export default {
    name: "accountSetting",
    data () {
        //会计期间 表头信息
        const periodColumns = [
            {
                title: "期间",
                width: 40,
                dataIndex: "currentPeriod",
                align: 'center',
                customRender: (text, row, index) => {
                    return text + "月";
                }
            },
            {
                title: "起始日期",
                width: 100,
                align: 'center',
                dataIndex: "beginDate"
            },
            {
                title: "结束日期",
                width: 100,
                align: 'center',
                dataIndex: "endDate"
            }
        ];
        //账套基本信息 字段
        let accountColumns = [
            { title: "账套名称", width: 140, dataIndex: "accountName" },
            { title: "法人代表", width: 140, dataIndex: "legalPerson" },
            { title: "本位币", width: 140, dataIndex: "baseCurrencyName" },
            { title: "邮政编码", width: 140, dataIndex: "postalCode" },
            { title: "企业类型", width: 140, dataIndex: "companyType" },
            { title: "会计制度", width: 140, dataIndex: "companyIndustry" },
            { title: "联系电话", width: 140, dataIndex: "contactNumber" },
            { title: "行政区", width: 140, dataIndex: "areaName" },
            { title: "开户银行", width: 140, dataIndex: "openingBank" },
            { title: "纳税地区", width: 140, dataIndex: "taxArea" },
            { title: "统一代码", width: 140, dataIndex: "unifiedSocialCode" },
            { title: "纳税性质", width: 140, dataIndex: "taxNature" },
            { title: "税率", width: 140, dataIndex: "taxRate" },
            { title: "备注", width: 140, dataIndex: "remarks" },
            { title: "账套主管", width: 140, dataIndex: "accountMasterName" }
        ];
        return {
            periodColumns,
            accountColumns, //账套基本信息 字段
            visible: false,
            isEditAccount: false, //账套信息 是否 处于编辑状态
            isEditPeriod: false, //会计期间 是否 处于编辑状态
            array: [
                {
                    type: 1,
                    title: "账套管理设置"
                },
                {
                    type: 2,
                    title: "会计期间设置"
                },
                {
                    type: 3,
                    title: "账户启用设置"
                },
                {
                    type: 4,
                    title: "编码规则设置"
                }
            ],
            accountList: [],
            currentAccount: {},
            //账套 Map
            accountMap: new Map(),
            //当前年份
            year: moment().format("YYYY"),
            //当前 账套年份
            currentAccountYear: null,
            //历史账套年份
            accountYearList: []
        };
    },
    created () {
        this.ListAccount();
    },

    methods: {
        rowClassName (record, index) {
            console.log(record.currentPeriod, this.currentAccount.enableDuration)
            return record.currentPeriod < this.currentAccount.enableDuration ? 'color-gray' : '';
        },
        // 获取 账套信息
        ListAccount () {
            const { accountMap, year } = this;
            let { currentAccountYear } = this;
            listAccount()
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        this.accountList = data;
                        let yearData = [];
                        console.log("获取 账套列表：", currentAccountYear, year, accountMap);
                        data.forEach(item => {
                            if (currentAccountYear) {
                                currentAccountYear = item.accountYear > currentAccountYear ? item.accountYear : currentAccountYear;
                            } else {
                                currentAccountYear = item.accountYear;
                            }
                            accountMap.set(item.accountYear, item);
                            yearData.push(item.accountYear);
                        });
                        console.log("获取 账套列表2：", currentAccountYear);
                        if (!currentAccountYear) {
                            currentAccountYear = year * 1;
                        }
                        console.log("获取 账套列表3：", currentAccountYear);
                        this.accountYearList = yearData;
                        this.currentAccountYear = currentAccountYear;
                        this.currentAccount = accountMap.get(currentAccountYear) || {};
                    }
                })
                .catch(error => { });
        },
        selectAccountYear (value) {
            this.currentAccount = this.accountMap.get(value * 1) || {};
        },
        changTab (key) {
            console.log(key);
            // if (!this.isEditAccount && (key == 2 || key == 3 || key == 4)) {
            //   this.$message.error("暂无账套，请新建账套");
            //   return;
            // }
            this.$nextTick(function () {
                switch (key) {
                    case "2":
                        // this.editAccountingFun();
                        console.log(this.currentAccount)
                        if (this.currentAccount.erpPeriodList.length == 0) {
                            this.$refs.accountingSetRef.currentAccount = this.currentAccount;
                            this.isEditPeriod = true;
                            this.$refs.accountingSetRef.add();
                        }
                        break;
                    case "3":
                        this.$refs.enableSetRef.currentAccount = this.currentAccount;
                        this.$refs.enableSetRef.list();
                        break;
                    case "4":
                        this.$refs.codingSetRef.currentAccount = this.currentAccount;
                        this.$refs.codingSetRef.loadRuleList();
                        break;
                }
            });
        },
        /** 新建账套（第一次新增账套） */
        addAccouontFun () {
            this.visible = true;
            this.$refs.modalOne.showModal(this.visible);
        },
        //账套基本信息 切换成 编辑模式
        editAccouontFun () {
            this.isEditAccount = true;
            this.$nextTick(function () {
                this.$refs.accountSetRef.postData = this.currentAccount;
                this.$refs.accountSetRef.initData();
            });
        },
        //取消 账套编辑模式
        cancelEditAccouontFun () {
            this.isEditAccount = false;
        },
        //调用 子组件 的保存方法
        saveAccouont () {
            this.$refs.accountSetRef.save();
        },
        // 保存账套基本信息 之后的回调
        saveAccouontCallBack () {
            this.isEditAccount = false;
            this.ListAccount();
        },
        //编辑 会计期间
        editAccountingFun () {
            this.isEditPeriod = true;
            this.$nextTick(function () {
                this.$refs.accountingSetRef.currentAccount = this.currentAccount;
                this.$refs.accountingSetRef.edit();
            });
        },
        //取消 会计期间 编辑模式
        cancelEditPeriodFun () {
            this.isEditPeriod = false;
        },
        //
        savePeriod () {
            this.$refs.accountingSetRef.handleSubmit();
        },
        //
        savePeriodCallBack () {
            this.isEditPeriod = false;
            this.ListAccount();
        },
        //保存 编码规则
        saveCoding () {
            this.$refs.codingSetRef.saveRule();
        },
        saveCodingCallBack () {
            this.$refs.codingSetRef.loadRuleList();
        }
    },
    components: {
        guideModal,
        accountSet,
        accountingSet,
        enableSet,
        codingSet
    }
};

</script>

<style lang="less" scoped>
    @import '../../../assets/antGlobal.less';
    .resize-table-container-setting {
        height: 100%;
        overflow-y: auto;
    }
    .account-set-wrappe {
        height: 100%;
        padding: 10px;
        .account-year {
            margin-left: 16px;
            .year-select {
                width: 120px;
                margin-left: 20px;
            }
        }
        .tabs-box {
            border: 1px solid @border-gray-dark;
            margin-top: 10px;
        }
        // .content-zt,
        .middle-table {
            margin: 0 auto;
        }
        .content-zt {
            .null-wrapper {
                padding: 50px;
                width: 100%;
                text-align: center;
                .text {
                    margin-top: 60px;
                }
                .btn {
                    margin-top: 50px;
                }
            }
        }
        .zcco-null {
            text-align: center;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.65);
        }
    }

    .form-inline {
        .form-group > label {
            font-weight: 700 !important;
        }
    }
    .align-right {
        text-align: right;
        margin-right: 20px;
    }
</style>
<style lang="less">
    .color-gray {
        color: #cccccc !important;
        .ant-table-row-cell-break-word {
            color: #cccccc !important;
        }
    }
</style>